<template>
  <div class="policy-item">
    <div class="left">
      <span v-if="data.isTopping" class="top">置顶</span>
      <span v-else class="number">{{ data.num }}</span>
      <span class="name">{{ data.ruleTitle }}</span>
    </div>
    <div class="right">
      <span v-show="data.isNew" class="new">新</span>
      <span class="time"> {{ date }}</span>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: 'PolicyItem',
  props: {
    data: {
      type: Object,
      default: () => ( {} )
    }
  },
  computed: {
    date() {
      const createTime = this.data?.createTime
      return createTime ? dayjs(createTime).format("YYYY-MM-DD") : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.policy-item {
  display: flex;
  justify-content: space-between;
  margin-top: .3rem;

  .left {
    display: flex;
    align-items: center;
    flex: 1;

    .top {
      width: 34px;
      height: 17px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 159, 159, 0.2431);
      color: rgba(255, 78, 78, 1);
      border: 1px solid #FF4E4E;
      font-size: 12px;
    }

    .number {
      width: 15px;
      height: 15px;
      background: rgba(87, 161, 255, 0.2745);
      color: rgba(56, 142, 252, 1);
      font-size: 12px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .name {
      display: inline-block;
      width: 3.5rem;
      font-weight: 400;
      color: #555770;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      padding: 0 10px;
      cursor: pointer;
    }
  }

  .right {
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .new {
      font-size: 12px;
      color: #FF4E4E;
      line-height: 15px;
      margin-right: 6px;
    }

    .time {
      font-size: 14px;
      font-weight: 400;
      color: #A9A9AF;
    }
  }

}

@media (max-width: 1919px) {
  .name {
    width: 3rem !important;
  }
}
</style>
